<template>
        <div class="auxiliaryLine_l" v-if="lineL" :style="{left:`${left}px`}"></div>
        <div class="auxiliaryLine_r" v-if="lineR" :style="{left:`${right}px`}"></div>
        <div class="auxiliaryLine_t" v-if="lineT" :style="{top:`${top}px`}"></div>
        <div class="auxiliaryLine_b" v-if="lineB" :style="{top:`${bottom}px`}"></div>
</template>
<script lang="ts" setup>
const props = defineProps(['lineL','lineR','lineT','lineB','left','top','right','bottom'])

</script>
<style lang="less">
.commit{
    position: absolute;
        background-color: red;
         top: 0;
         left: 0;
}
.auxiliaryLine{ 
     &_l{
         &:extend(.commit);
         height: 100%;
         width: 1px;
     }
     &_r{
         &:extend(.commit);
         height: 100%;
         width: 1px;
     }
     &_t{
         &:extend(.commit);
         height: 1px;
         width: 100%;
     }
     &_b{
         &:extend(.commit);
         height: 1px;
         width: 100%;
     }
}

</style>